Android Material Design：TabLayout的自定义

TabLayout的自定义，主要是通过setCustomView方法来添加自定义布局实现。

自定义TabLayout的实现主要包含以下几个步骤

●创建自定义布局（这里我加了一个动画控件，可以替换成其他控件）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">
        <com.airbnb.lottie.LottieAnimationView
            android:layout_width="40dp"
            android:id="@+id/lottanim"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"
            app:lottie_fileName="infinity.json"
            android:layout_height="20dp" />
        <TextView
            android:layout_width="wrap_content"
            android:text="标题"
            android:id="@+id/tv"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

●创建Activity布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:id="@+id/tablayout"
        app:tabMode="scrollable"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
</LinearLayout>

●在Activity中动态添加tab

 tabLayout=findViewById(R.id.tablayout);
 for (int x=0;x<8;x++){
            TabLayout.Tab tab = tabLayout.newTab();
            View inflate = View.inflate(this, R.layout.customtablayout, null);
            TextView textView = inflate.findViewById(R.id.tv);
            textView.setText("标题"+x);
            tab.setCustomView(inflate);
            tabLayout.addTab(tab);
}

此时就已经实现了自定义tab了

接下来实现绑定ViewPager

viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 8;
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view==object;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                TextView textView=new TextView(CustomTablayout.this);
                textView.setText(position+"");
                textView.setTextSize(50);
                container.addView(textView);
                return textView;
            }

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView((View) object);
            }
        });
tabLayout.setupWithViewPager(viewPager);

这里发现自定义的tab不见了，这里是因为当Tablayout绑定ViewPager的时候TabLayout会采用默认的tab布局所以才看不到效果。

解决方法：不采用setupWithViewPager方法来进行手动绑定，这里注意tab的数量要和PagerAdapter的getCount方法返回的数量一致。

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tabLayout.setScrollPosition(position, 0f, true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });